<template>
    <div>
        <el-row>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/main/' }" class="a"><div class="title">系统权限</div></el-breadcrumb-item>
        </el-breadcrumb>
        </el-row>
        <el-container>
            <el-header>
                <el-row style="margin-top: 16px">
                    <el-input style="width: 15%" v-model="query.nameUser" clearable placeholder="请输入姓名">
                    </el-input>
                    <el-input style="width: 15%" v-model="query.idUser" clearable placeholder="请输入工号">
                    </el-input>
                    <el-select style="width: 15%" v-model="query.authorizationUser" clearable  placeholder="请选择权限">
                        <el-option
                            v-for="item in roles"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button  @click="getUserList" round style="width: 90px;border-radius: 5px;background: #275ce6;"><div class="txtx">查询</div></el-button>
                </el-row>
            </el-header>
            <el-main class="std" >
                <el-table
                    :data="users.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    style="width: 100%"
                    stripe>
                    <el-table-column
                        prop="nameUser"
                        label="姓名"
                        width:326px>
                    </el-table-column>
                    <el-table-column
                        prop="idUser"
                        label="工号"
                        width:326px>
                    </el-table-column>
                    <el-table-column
                        prop="authorizationUser"
                        label="访问角色"
                        width:326px>
                        <template slot-scope="scope">
                            {{formatRole(scope.row.authorizationUser)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="authorizationUser"
                        label="系统权限"
                        width:326px>
                        <template slot-scope="scope">
                            {{formatRight(scope.row.authorizationUser)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width:328px>
                        <template slot-scope="scope">
                            <el-button type="text"
                                       size:14px
                                       style="color: #275ce6"
                                       @click="edit(scope.row)"><u>编辑</u>
                            </el-button>
                            <SystemManageEditDialog @ok="getUserList" ref="systemManageEdit"/>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer class="std2" >
                <el-pagination class="btm_choseBox"
                               background
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="query.pageNo"
                               :page-sizes="[10,20,50,100]"
                               :page-size="query.pagesize"
                               layout="total, sizes, prev, pager, next"
                               :total="total">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>

<script>

import {systemManageList} from '../../../../api/user'
import SystemManageEditDialog from '../../components/user/SystemManageEditDialog.vue'
export default {
  name: 'systemManage',
  components: {
    SystemManageEditDialog
  },
  data () {
    return {
      currentPage: '1',
      pagesize: '100',
      dialogForm2Visible: false,
      users: [],
      total: 0,
      roles: [{
        value: 1,
        label: '超级管理员'
      }, {
        value: 2,
        label: '二级管理员'
      }, {
        value: 3,
        label: '普通用户'
      }],
      query: {
        idUser: '',
        nameUser: '',
        authorizationUser: '',
        pageNo: 1,
        pagesize: 10
      },
      ruleForm: {
        character: '',
        access: ''
      },
      rules1: {
        character: [
          {}
        ],
        access: [
          {}
        ]
      }
    }
  },
  methods: {
    edit (row) {
      this.$refs.systemManageEdit.show(row, this.roles)
    },
    getUserList () {
      systemManageList(this.query).then(res => {
        this.users = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange (size) {
      this.query.pagesize = size
      this.getUserList()
    },
    handleCurrentChange (currentPage) {
      this.query.pageNo = currentPage
      this.getUserList()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    formatRole (authorizationUser) {
      switch (Number(authorizationUser)) {
        case 1:
          return '超级管理员'
        case 2:
          return '二级管理员'
        case 3:
          return '普通用户'
      }
    },
    formatRight (authorizationUser) {
      switch (Number(authorizationUser)) {
        case 1:
          return '房源基建；房源分配；本科生房源；研究生房源；系统权限'
        case 2:
          return '房源基建；房源分配；本科生房源；研究生房源'
        case 3:
          return '园区统计'
      }
    }
  },
  created () {
    this.getUserList()
  }
}

</script>
<style lang="less" scoped>
@import "../../../../assets/styles/pages";
.title{
    font-weight: 700;
    font-size: 16px;
    color: #1a1a1a;
}
.tx1{
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.19px;
  text-align: center;
  color: #999;
  width: 50%;
  display: inline;

}

.bg{
  border-radius: 4px;
  min-height: 36px;
  background: #FFFFFF ;
}
.txtx{
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.19px;
    text-align: center;
    color: #fff;
}
.btn3{
    margin-top: 16px;
    width: 90px;
    border-radius: 5px;
    background: #275ce6;
    position: absolute;
    right: 16px;
}
.temptx{
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.19px;
    text-align: left;
    color: #fff;
}
</style>
